import React, { useEffect } from "react";
import { connect } from "react-redux";
import styled from "styled-components";

import HotBg from "../../assets/images/hotbg.jpg";
import hotIcon from "../../assets/images/index.png";
import Loading from "../../components/Loading/loading.jsx";
import MusicList from "../../components/MusicList/music-list.jsx";
import { getHotSongsAction } from "./store/action";

// import Header from "../../components/Header/header.jsx";
// import Tab from "../../components/Tab/tab.jsx";

const HotWrapper = styled.div`
  width: 100%;
  .bottom {
    font-size: 14px;
    height: 55px;
    line-height: 55px;
    text-align: center;
    color: #999;

    .iconfont {
      display: inline-block;
      transform: scale(0.8) translateY(2px);
    }
  }
  .hot-top {
    width: 100%;
    padding-top: 38.9%;
    position: relative;
    .hot-bg {
      position: absolute;
      top: 0;
      right: 0;
      left: 0;
      bottom: 0;
      background: url(${props => props.bg});
      background-size: contain;
      padding-left: 20px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      .hot-icon {
        width: 142px;
        height: 67px;
        background: url(${props => props.hotIcon});
        background-position: -24px -30px;
        background-size: 166px 97px;
      }
      .hot-time {
        margin-top: 10px;
        color: hsla(0, 0%, 100%, 0.8);
        font-size: 12px;
        transform: scale(0.91);
        transform-origin: left top;
      }
    }
  }
`;
function Hot(props) {
  const { getHotSongsAction, hotSongs } = props;
  const len = hotSongs.length;
  useEffect(() => {
    if (!hotSongs.length) {
      getHotSongsAction();
    }
  }, [hotSongs.length]);
  return (
    <HotWrapper bg={HotBg} hotIcon={hotIcon} className="toTop">
      {/* <React.Fragment>
        <Header />
        <Tab />
      </React.Fragment> */}
      <div className="hot-top">
        <div className="hot-bg">
          <div className="hot-icon"></div>
          <div className="hot-time">
            更新日期：{new Date().getMonth() + 1}月{new Date().getDate()}日
          </div>
        </div>
      </div>
      <MusicList isNum list={hotSongs} />
      <Loading show={!len} />
      <div className="bottom">
        <span className="c">
          <span>查看完整榜单</span>
          <i className="iconfont icon-right"></i>
        </span>
      </div>
    </HotWrapper>
  );
}

export default connect(state => ({ hotSongs: state.hotSongs }), {
  getHotSongsAction
})(React.memo(Hot));
